﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>02.StudentsWithMarks</title>
	<script src="Scripts/jquery-2.0.3.js"></script>
	<script src="Scripts/class.js"></script>
	<script src="Scripts/mustache.js"></script>
	<script src="Scripts/httpRequester.js"></script>
	<script src="Scripts/students-marks.js"></script>
    <link href="style.css" rel="stylesheet" />
</head>
<body>
	<script type="x-mustache-template" id="student-template">	
        <strong>{{FirstName}} {{LastName}}</strong>
	</script>
	<script type="x-mustache-template" id="marks-template">	
        <strong>{{Subject}} - {{Score}}</strong>
	</script>

    <div id="content"></div>
    <div id="marks"></div>
    <script>
        var studentTemplate = Mustache.compile(document.getElementById("student-template").innerHTML);
        var marksTemplate = Mustache.compile(document.getElementById("marks-template").innerHTML);

        var itemsSource = httpRequester.getJson("http://localhost:10536/api/students", function (students) {
            var studentTableView = controls.getTableView(students);

            var studentHtml = studentTableView.render(studentTemplate);

            //console.log(tableHtml);

            document.getElementById("content").innerHTML = studentHtml;

            $("#content").on("click", "strong", function (ev) {
                var names = ev.target.innerHTML.split(' ');
                var firstName = names[0];
                var lastName = names[1];

                console.log(firstName + lastName);

                httpRequester.getJson("http://localhost:10536/api/students?firstname=" + firstName + "&lastname=" + lastName, function (marks) {
                    var markTableView = controls.getTableView(marks);

                    var marksHtml = markTableView.render(marksTemplate);
                    //console.log(marksHtml);

                    document.getElementById("marks").innerHTML = marksHtml;
                });
            });
        });
        
    </script>
</body>
</html>
